<template>
	<view class="container">
		<view class="box" v-if="listData.cat_list">
			<view class="container-box" v-for="(item,index) in listData.cat_list" :key='index'>
				<view class="h1">{{item.cat_name}}</view>
				<view class="pig-grid">
					<view class="pig-grid-item" @click="goUrl" :data-url="items.cat_url" v-for="(items,indexs) in item.son_list" :key="indexs">
						<view class="item-icon">
							<image :src="items.cat_img" class="icon-img"></image>
						</view>
						<text class="text">{{items.cat_name}}</text>
					</view>
				</view>
			</view>
		</view>
		<villagecopyfooter :footer_link="footer_link"></villagecopyfooter>
		<tabbar class="tabbar" :tabbar="tabbar"></tabbar>
		<!-- <button type="primary" @tap="golist">提交</button> -->
		<!-- <button type="primary" @tap="gojiaofei">提交</button> -->
	</view>
</template>

<script>
	import villagecopyfooter from '../../appComponent/villagePage/copy_footer.vue'
	
	var common = require('../../utils/common.js');
	var app = getApp();
	var _this;
	export default {
		data() {
			return {
				listData: {},
				tabbar: {},
				village_id: 0,
				pigcms_id: 0,
				village_name:'',
				village_logo:"",
				config: '',
				mobile_head_color: '',
				footer_link:{}
			}
		},
		onShow() {
			if(common.wxapp_type == 'village'){
				common.editTabbar({}, function(data) {
					_this.tabbar = data;
				});
			}
			
			// #ifdef H5
				if(_this.village_id){
					_this.setWxShare()
				}
			// #endif
		},
		onLoad: function(options) {
			_this = this;
			common.setMainColor(_this, function(config) {
				common.getTxtKey('便民').then(key => {
					uni.setNavigationBarTitle({
						title: key
					});
				}, () => {});
			});

			const res = uni.getStorageSync('village_key');
			if(res){
				_this.village_id = res.village_id;
				_this.village_name = res.village_name;
				_this.pigcms_id = res.pigcms_id;
				_this.village_logo = res.village_logo;
			}
			
            if(options.village_id && options.village_id != _this.village_id){
				common.post('HouseApi&a=search_village', {
					village_id: options.village_id
				}, data => {
					_this.village_logo = data.village_logo ? data.village_logo : data.wechat_share_img;
					_this.village_id = options.village_id;
					_this.village_name = options.village_name;
					
					var res = {
						village_id: _this.village_id,
						village_name: _this.village_name,
						village_logo: _this.village_logo
					};
					if(options.pigcms_id){
						res.pigcms_id = options.pigcms_id;
						_this.pigcms_id = options.pigcms_id;
					}
					uni.setStorageSync('village_key', res);
					
					// #ifdef H5
						_this.setWxShare()
					// #endif
					
					_this.get_list();
				});
				return false;
			}

			if (!_this.village_id) {
				uni.showModal({
					title: common.changeTxt('提示'),
					content: common.changeTxt('您没有选择小区,请选择一个小区浏览'),
					showCancel: false,
					confirmText: common.changeTxt('选择'),
					success: function(res) {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/village/my/villagelist'
							})
						}
					}
				});
			} else {
				_this.get_list();
			}
		},

		methods: {
			get_list(){
				//社区不是主营业务时的底部导航
				if(common.wxapp_type != 'village'){
					common.editTabbarBusiness({type:'village', postParam:{'village_id':_this.village_id}}, function(data){
						var route = _this.__route__ ? _this.__route__ : _this.route;
						data.nowPage = (route.substr(0, 1) != '/' ? '/' : '') + route;
						_this.tabbar = data;
						console.log('_this.tabbar', _this.tabbar);
					});
				}
				
				common.post('HouseApi&a=convenient_list', {
					village_id: _this.village_id
				}, data => {
					if (data) {
						console.log(data)
						_this.listData = data;
						_this.footer_link = data.footer_link;
					}
				});
			},
			onShareAppMessage: function () {
				return {
					title:  "【" + _this.village_name + "】便民服务中心",
					desc: "一起来看看" + _this.village_name + "关于我们身边的便民服务",
					path: '/pages/village/convenient/convenient?village_id=' + _this.village_id
				};
			},
			setWxShare() {
				let pageLink = `${common.requestDomain}packapp/${common.wxapp_type}/pages/village/convenient/convenient?village_id=${_this.village_id}`
				pageLink = common.addShareParam(pageLink)
				let shareWxLink = pageLink;
				var shareData = {
					title: "【" + _this.village_name + "】便民服务中心",
					desc: "一起来看看" + _this.village_name + "关于我们身边的便民服务",
					sendFriendLink: shareWxLink,
					share_img: _this.village_logo
				}
				console.log('shareData', shareData);
				common.setWxShare(shareData)
			},
			
			goUrl: function(e) {
				console.log('----------------------');
				console.log(e);

				if (e.type == 'submit') {
					common.upFormid(e);
				}

				if (e.currentTarget.dataset.goodsid) {
					goodsReport(e.currentTarget.dataset.goodsid);
				}

				var nums = e.currentTarget.dataset.nums;
				var pageTitle = e.currentTarget.dataset.url_title;
				var url = e.currentTarget.dataset.url;
                
				if(url == ''){
					return;
				}
                if (_this.village_id) {
                    url = common.changeURLArg(url, 'village_id', _this.village_id);
                }
				
				if (_this.pigcms_id) {
					url = common.changeURLArg(url, 'pigcms_id', _this.pigcms_id);
				}

				if (!pageTitle) {
					pageTitle = '';
				}
				console.log('nums', nums)
				console.log('url_0', url)
				if (nums) {
					common.post('Login&a=house_adver_click', {
						adver_id: nums
					}, function(e) {
						common.parseUrl(url, '', false, pageTitle);
					});
				} else {
					common.parseUrl(url, '', false, pageTitle);
				}
			},
			golist() {
				uni.navigateTo({
					url:'/pages/village/mobileMeterReading/workList'
				})
			},
			gojiaofei() {
				uni.navigateTo({
					url:'/pages/village/street/streetNews'
				})
			}
		},
		components: {
			villagecopyfooter
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
		height: 100%;
	}

	.container {
		padding: 0px 0px 0px 0px;
		margin: 0px;
		padding-top: 15rpx;
		padding-bottom: 98rpx;
		padding-bottom: calc(98rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(98rpx + env(safe-area-inset-bottom));
		
		min-height: calc(100% - 98rpx);
		min-height: calc(100% - 98rpx - constant(safe-area-inset-bottom));
		min-height: calc(100% - 98rpx - env(safe-area-inset-bottom));
		
		overflow-x: hidden;
		position: relative;
	}

	.box {
		background: #FFFFFF;
		padding-top: 54rpx;
	}

	.container-box {
		background: #FFFFFF;
	}

	.container-box:nth-child(n+2) {
		margin-top: 20rpx;
	}

	.h1 {
		font-size: 28rpx;
		font-weight: bold;
		color: rgba(0, 0, 0, 1);
		line-height: 60rpx;
		margin-left: 24rpx;
	}
	
	.pig-grid {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
	}
	
	.pig-grid-item {
		width:25%;
		text-align: center;
		padding:40rpx 0;
	}

	.item-icon {
		width: 45rpx;
		height: 45rpx;
		margin:0 auto 10rpx;
	}

	.icon-img {
		width: 100%;
		height: 100%;
	}

	.text {
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}
</style>
